﻿@page "/components/hidden"

<DocsPage>
    <DocsPageHeader Title="Hidden" SubTitle="Hiding parts of the UI with MudHidden" />
    <DocsPageContent>
        <MudText>All elements are rendered unless <b>they are explicitly hidden.</b> You can use <MudLink Href="/features/breakpoints">MudBlazor's breakpoints</MudLink> combined with MudHidden to hide any content.</MudText>
    </DocsPageContent>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="How it works">
                <Description>The following example shows all breakpoint options only if they match the screensize. Because it is more intuitive for this example, we inverted all the breakpoints so that you can see them only if they match.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="HiddenExample" ShowCode="false">
                <HiddenExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Listening to browser window resize events">
                <Description>
                    <MudText>Directly listening to the screen size change events is the most expensive way to adapt to a resizing browser window. Use this only if the other breakpoint methods don't work for you.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BrowserResizeEventExample" ShowCode="false">
                <BrowserResizeEventExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
